<template>
  <div class="area-scheme">
    <el-dialog v-model="dialogVisible" :before-close="handleClose">
      <template #header>
        <div class="my-header">
          <div>{{ state.title }}</div>
        </div>
      </template>
      <div class="name-box">
        <span>方案名称：</span>
        <el-input v-model="state.schemeName" placeholder="请输入" />
        <span>模型类型：</span>
        <el-select
          v-model="state.model"
          class="m-2"
          placeholder="请选择"
          @change="handleChangeModel"
        >
          <el-option
            v-for="item in state.modelArr"
            :key="item.modelType"
            :label="item.typeName"
            :value="item.modelType"
          />
        </el-select>
      </div>
      <div class="content-box">
        <el-table :data="state.tableData" border style="width: 100%" height="300px">
          <el-table-column prop="zName" label="区域名称" align="center"></el-table-column>
          <el-table-column prop="name" label="区域方案" align="center">
            <template #default="scope">
              <el-select
                v-model="state.tableData[scope.$index].schemeId"
                placeholder="请选择"
                @change="handleAreaScheme(scope.$index, scope.row.schemeId)"
              >
                <el-option
                  v-for="item in scope.row.schemes"
                  :key="item.scid"
                  :label="item.scName"
                  :value="item.scid"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="handleSave">保存</el-button>
          <el-button @click="handleClose()">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, defineExpose } from 'vue'
import { getZoneSchemesList, getCalcModelType } from '@/services/modules/compute-methods'
const props = defineProps({
  zId: {
    type: Number,
    default: 1
  }
})
onMounted(() => {})
const dialogVisible = ref(false)
const state = reactive({
  model: '',
  modelArr: [],
  id: '',
  zoneSchemes: [],
  schemeName: '',
  zoneId: '',
  title: '新建河系方案',
  areaList: [],
  areaScheme: '',
  tableData: [
    {
      areaName: '1',
      name: '  '
    }
  ]
})
const emit = defineEmits(['closeDialog', 'handleSaveRiverScheme'])
const closeDialog = () => {
  emit('closeDialog', false)
}
//
function handleAreaScheme(index, item) {
  state.tableData[index].schemeId = item
}
//查询河系下区域及方案
function zoneSchemesList(id) {
  return new Promise((resolve, reject) => {
    getZoneSchemesList({ rsid: id, model: state.model }).then((res) => {
      if (res.code === 200) {
        state.tableData = res.data
        state.tableData.forEach((item, index) => {
          item.schemeId = item.schemes[0].scid
        })
        resolve(state.tableData)
      }
    })
  })
}
// //获取河系区域
// function getAreaList(id) {
//   return new Promise((resolve, reject) => {
//     getZoneList({ rsid: id }).then((res) => {
//       if (res.code === 200) {
//         state.areaList = res.data;
//         resolve(state.areaList);
//       }
//     });
//   });
// }
//保存区域
function handleSave() {
  state.zoneSchemes = []
  state.tableData.forEach((item) => {
    state.zoneSchemes.push({ zid: item.zid, zscid: item.schemeId })
  })
  if (state.id) {
    emit('handleSaveRiverScheme', {
      id: state.id,
      scName: state.schemeName,
      rsid: state.zoneId,
      model: state.model,
      zoneSchemes: state.zoneSchemes
    })
  } else {
    emit('handleSaveRiverScheme', {
      scName: state.schemeName,
      rsid: state.zoneId,
      model: state.model,
      zoneSchemes: state.zoneSchemes
    })
  }
  handleClose()
}
// //查看河系的区域方案
// function getRiverAreaSchemeList(id){
//       getZoneSchemes({ scid: id }).then((res) => {
//       if (res.code === 200) {
//        let arr = []
//         arr = res.data
//        state.tableData =  arr.map(item=>{
//             return {
//               ...item,schemes:{
//                 scid:item.zscid,
//                 scName:item.zscName
//               }
//             }
//         })
//       }
//     })
// }
//修改模型类型
async function handleChangeModel(val) {
  state.model = val
  await zoneSchemesList(state.zoneId)
}
const handleGetTypeList = () => {
  return new Promise((resolve, reject) => {
    getCalcModelType().then((res) => {
      if (res.code === 200) {
        state.modelArr = res.data
        if (!state.id) handleChangeModel(state.modelArr[0].modelType)
        resolve(state.modelArr)
      }
    })
  })
}
async function handleOpenModal(row) {
  state.model = row.model
  state.zoneId = row.zoneId
  dialogVisible.value = true

  if (row.id) {
    state.title = '修改河系方案'
    state.schemeName = row.scName
    state.id = row.id

    getZoneSchemesList({
      rscid: row.id,
      rsid: props.zId,
      model: state.model
    }).then((res) => {
      if (res.code === 200) {
        state.tableData = res.data
        state.tableData.forEach((item, index) => {
          item.schemeId = item.zscid
        })
      }
    })
  } else {
    state.id = ''
    state.title = '新建河系方案'
    state.schemeName = ''
    // zoneSchemesList(row.zoneId);
  }
  await handleGetTypeList()
}
defineExpose({ handleOpenModal })
function handleClose() {
  dialogVisible.value = false
}
</script>

<style lang="less" scoped>
.area-scheme {
  .my-header {
    height: 35px;
    border-bottom: 2px solid #eee;
  }
  .name-box {
    display: flex;
    align-items: center;
    height: 30px;
    span {
      width: 100px;
    }
    :deep(.el-input) {
      width: 200px;
      margin-right: 20px;
    }
  }
  .content-box {
    display: flex;
    width: 100%;
    height: 55vh;
    margin-top: 20px;
    box-sizing: border-box;
    .content-left {
      width: 250px;
      height: 100%;
      margin: 0 5px;
      border-right: 2px solid #eee;
      .left-title {
        height: 40px;
        background: #eee;
        display: flex;
        justify-content: center;
        align-items: center;
        color: black;
      }
      .left-box {
        height: calc(100% - 40px);
        overflow-y: auto;
        .box-item {
          height: 30px;
          color: gray;
          display: flex;
          justify-content: space-between;
          align-items: center;
          span:nth-of-type(1) {
            width: 100%;
            display: inline-block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          &.active {
            span:nth-of-type(1) {
              cursor: pointer;
              color: #409eff;
            }
          }
          &:hover {
            span:nth-of-type(1) {
              cursor: pointer;

              color: #409eff;
            }
          }
          span:nth-of-type(2) {
            color: #409eff;
            margin-right: 10px;
          }
        }
        .box-btn {
          width: 100%;
          height: 40px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: #409eff;
          color: #fff;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
